<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>链接信息 - LayUI模块化应用</title>
    <link rel="stylesheet" href="https://registry.npmmirror.com/layui/2.11.6/files/dist/css/layui.css">
    <link rel="stylesheet" href="css/common.css">
</head>
<body>
    <div class="layui-layout layui-layout-admin">
        <!-- 头部组件 -->
        <div id="header-container"></div>
        
        <!-- 侧边栏组件 -->
        <div id="sidebar-container"></div>
        
        <!-- 内容主体区域 -->
        <div class="layui-body">
            <div class="layui-fluid content-wrapper">
                <div class="content-header">
                    <h2>链接信息</h2>
                </div>
                
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">链接信息列表</div>
                            <div class="layui-card-body">
                                <table id="linkTable" lay-filter="linkTable"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部组件 -->
        <div id="footer-container"></div>
    </div>

    <script src="https://registry.npmmirror.com/layui/2.11.6/files/dist/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="js/common.js"></script>
    <script>
        // 页面特定的JS代码
        layui.use(['table', 'element', 'layer'], function() {
            var table = layui.table;
            var element = layui.element;
            var layer = layui.layer;
            
            // 页面加载完成后执行
            $(document).ready(function() {
                // 加载组件
                loadComponents();
                
                // 初始化表格
                initTable();
            });
            
            // 加载组件函数
            function loadComponents() {
                // 加载头部
                $('#header-container').load('components/header.html', function() {
                    layui.element.render();
                });
                
                // 加载侧边栏
                $('#sidebar-container').load('components/sidebar.html', function() {
                    layui.element.render();
                    // 设置当前页面激活状态
                    $('#nav-links').addClass('layui-this');
                });
                
                // 加载底部
                $('#footer-container').load('components/footer.html');
            }
            
            // 初始化表格函数
            function initTable() {
                table.render({
                    elem: '#linkTable',
                    url: '', // 实际项目中这里应该是API接口地址
                    data: [
                        {
                            name: 'GitHub',
                            url: 'https://github.com',
                            status: 'online',
                            delay: 45,
                            lastCheck: '2024-01-15 14:30:25'
                        },
                        {
                            name: 'Google',
                            url: 'https://google.com',
                            status: 'online',
                            delay: 23,
                            lastCheck: '2024-01-15 14:30:20'
                        },
                        {
                            name: 'Stack Overflow',
                            url: 'https://stackoverflow.com',
                            status: 'offline',
                            delay: 0,
                            lastCheck: '2024-01-15 14:30:15'
                        },
                        {
                            name: 'NPM',
                            url: 'https://npmjs.com',
                            status: 'online',
                            delay: 67,
                            lastCheck: '2024-01-15 14:30:10'
                        },
                        {
                            name: 'MDN Web Docs',
                            url: 'https://developer.mozilla.org',
                            status: 'online',
                            delay: 89,
                            lastCheck: '2024-01-15 14:30:05'
                        }
                    ],
                    cols: [[
                        {field: 'name', title: '名称', width: 150},
                        {field: 'url', title: 'URL', width: 300},
                        {field: 'status', title: '状态', width: 100, templet: function(d) {
                            if (d.status === 'online') {
                                return '<span style="color: #5FB878;">在线</span>';
                            } else {
                                return '<span style="color: #FF5722;">离线</span>';
                            }
                        }},
                        {field: 'delay', title: '延迟(ms)', width: 120, templet: function(d) {
                            if (d.delay === 0) {
                                return '-';
                            }
                            return d.delay;
                        }},
                        {field: 'lastCheck', title: '最后检查时间', width: 180},
                        {title: '操作', width: 150, toolbar: '#linkBar'}
                    ]],
                    page: true,
                    limit: 10,
                    limits: [10, 20, 50],
                    height: 'full-200',
                    done: function(res, curr, count) {
                        // 表格渲染完成后的回调
                        console.log('表格渲染完成', res, curr, count);
                    }
                });
                
                // 监听工具条事件
                table.on('tool(linkTable)', function(obj) {
                    var data = obj.data;
                    var layEvent = obj.event;
                    
                    if (layEvent === 'check') {
                        // 检查链接
                        layer.msg('正在检查链接: ' + data.name);
                        // 这里可以添加实际的检查逻辑
                        setTimeout(function() {
                            layer.msg('链接检查完成');
                            // 重新加载表格数据
                            table.reload('linkTable');
                        }, 2000);
                    } else if (layEvent === 'edit') {
                        // 编辑链接
                        layer.open({
                            type: 1,
                            title: '编辑链接',
                            area: ['500px', '400px'],
                            content: '<div style="padding: 20px;">' +
                                '<form class="layui-form">' +
                                '<div class="layui-form-item">' +
                                '<label class="layui-form-label">名称</label>' +
                                '<div class="layui-input-block">' +
                                '<input type="text" name="name" value="' + data.name + '" class="layui-input">' +
                                '</div>' +
                                '</div>' +
                                '<div class="layui-form-item">' +
                                '<label class="layui-form-label">URL</label>' +
                                '<div class="layui-input-block">' +
                                '<input type="text" name="url" value="' + data.url + '" class="layui-input">' +
                                '</div>' +
                                '</div>' +
                                '</form>' +
                                '</div>',
                            btn: ['保存', '取消'],
                            yes: function(index, layero) {
                                // 获取表单数据并保存
                                var formData = {
                                    name: layero.find('input[name="name"]').val(),
                                    url: layero.find('input[name="url"]').val()
                                };
                                layer.msg('保存成功');
                                layer.close(index);
                                // 重新加载表格数据
                                table.reload('linkTable');
                            }
                        });
                    } else if (layEvent === 'delete') {
                        // 删除链接
                        layer.confirm('确定要删除链接 "' + data.name + '" 吗？', function(index) {
                            layer.msg('删除成功');
                            layer.close(index);
                            // 重新加载表格数据
                            table.reload('linkTable');
                        });
                    }
                });
            }
        });
        
        // 工具条模板
        layui.define(function(exports) {
            var tpl = '<script type="text/html" id="linkBar">' +
                     '<a class="layui-btn layui-btn-xs" lay-event="check">检查</a>' +
                     '<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a>' +
                     '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>' +
                     '</' + 'script>';
            document.write(tpl);
            exports('linkBar', {});
        });
    </script>
</body>
</html>